<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录注册</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="left_img">
            <img src="../meinv.jpg" alt="图片">
        </div>
        
        <div class="panel">
            <div class="content login">
                <div class="switch">
                    <span class="active" id="login">登录</span>
                    <span>/</span>
                    <span id="signup">注册</span>
                </div>
                <form action="">
                    <div id="email" placeholder="邮箱"  class="input"><input type="text"></div>
                    <div placeholder="用户名" class="input"><input type="text"></div>
                    <div placeholder="密码"  class="input"><input type="text"></div>
                    <div id="repeat" placeholder="重复密码" class="input"><input type="text"></div>
                    <span>忘记密码？</span>
                    <button>登 录</button>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.switch #login').click(function(){
                $(this).parent().children().removeClass('active');
                $(this).addClass('active');


                $(this).parents('.content').removeClass('signup')
                $(this).parents('.content').addClass('login')

            })

            $('.switch #signup').click(function(){
                $(this).parent().children().removeClass('active');
                $(this).addClass('active');

                $(this).parents('.content').removeClass('login')
                $(this).parents('.content').addClass('signup')

            })

            $('.input input').on('focus',function(){
                $(this).parent().addClass('focus')
            })
            $('.input input').on('blur',function(){
                $(this).parent().removeClass('focus')
            })
        })
    </script>
</body>
</html>